<template>
	<div class="container">

		<div class="title">
			<div class="title_le"><span style="font-size: 24px;font-weight: bold;">雇主：<span
						style="font-size: 32px;font-weight: bold;color: #004DD5;">{{empNumber}}人</span></span></div>
			<div class="title_le"><span style="font-size: 24px;font-weight: bold;">从业者：<span
						style="font-size: 32px;font-weight: bold;color:#004DD5;">{{praNumber}}人</span></span></div>
			<div class="title_le"><span style="font-size: 24px;font-weight: bold;">线上门店：<span
						style="font-size: 32px;font-weight: bold;color: #004DD5;">{{shopNumber}}家</span></span></div>
		</div>
		<div class="center">
			<div class="money">
				<div class="money-child"><span>雇主与门店支付总金额:</span></div>
				<div class="money-childs"><span>{{paymentMoney}}</span></div>
			</div>
			<div class="money">
				<div class="money-child"><span>雇主与门店待支付总金额:</span></div>
				<div class="money-childs"><span>{{unpaidMoney}}</span></div>
			</div>
			<div class="money">
				<div class="money-child"><span>家政招聘完成已支付订单数量:</span></div>
				<div class="money-childs"><span>{{prepaidOrderNumber}}</span></div>
			</div>
			<div class="money">
				<div class="money-child"><span>家政招聘完成待支付订单数量:</span></div>
				<div class="money-childs"><span>{{paymentOrderNumber}}</span></div>
			</div>
			<div class="money">
				<div class="money-child"><span>奖励积分发放总金额:</span></div>
				<div class="money-childs"><span>{{amountOfBonusPoints}}</span></div>
			</div>
		</div>
		<div style="display: flex;justify-content: space-between;">
			<div style="display: flex; flex-direction: column; flex: 3;margin-right: 1%;">
			<div ref="Histogram1" id="Histogram1" style="flex: 1; background: #f8f8f8; margin-bottom: 1%;padding: 1%;"></div>
			<div ref="Histogram2" id="Histogram2" style="flex: 1; background: #f8f8f8;padding: 1%;"></div>
			</div>
			<div class="Chart Fan" style="flex: 1.2;">
				<div class="chart_title">家政人员比例：</div>
				<div @mouseleave="percentage_show=true" @mouseenter="percentage_show=false" id="Piechart" ref="Piechart" style="
					width:100%;
					height: 437px;
					border-radius: 5px;
					z-index: 999;
					"></div>
					<div style="width: 100%;position: absolute;width: 45%;position: absolute; left: 50%; top: 55%;transform: translate(-50%, -50%);display: flex;justify-content: center;align-items: center;">
					<img style="width: 100%;" src="../../assets/img/tuoyuan.png" />
					<div class="percentage">
						<p class="percentage_item1" v-if="percentage_show">雇主{{registeredEmployers}}人</p>
						<p class="percentage_item2"  v-if="percentage_show">{{registeredShoped}}%</p>
					</div>
					</div>
			</div>
		</div>
		<div class="bottom">
			<div class="btn"><button>日</button><button>月</button><button>年</button></div>
			<div class="bottom_box">
				<div class="money money-bottom">
					<div class="money-child"><span>注册雇主数:</span></div>
					<div class="money-childs bottom-child"><span>{{registeredEmployers}}</span></div>
				</div>
				<div class="money money-bottom">
					<div class="money-child"><span>注册从业者数:</span></div>
					<div class="money-childs bottom-child"><span>{{registeredPre}}</span></div>
				</div>
				<div class="money money-bottom">
					<div class="money-child"><span>入住门店数:</span></div>
					<div class="money-childs bottom-child"><span>{{registeredShop}}</span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {


		data() {
			return {
				percentage_show:true,
				numberEmployees:0,//已入职总数
				numberJobsPosted:0,//已发布的岗位总数
				numberJobsPosteded:0,//已发布的岗位总数百分比
				recruitmentCompleted:0,//完成招聘总数
				recruitmentCompleteded:0,//完成招聘总数百分比
				registeredEmployers:0,//注册雇主数
				registeredPre:0,//注册从业者数
				registeredShop:0,//注册线下门店数
				totalHired:0,//待入职总数
				empNumber:0,//雇主人数
				amountOfBonusPoints:0,//奖励积分发放总金额
				paymentMoney:0,//雇主与门店支付总金额
				paymentOrderNumber:0,//家政招聘完成待支付订单数量
				praNumber:0,//从业者人数
				prepaidOrderNumber:0,//家政招聘完成已支付订单数量
				shopNumber:0,//线下门店数
				unpaidMoney:0,//雇主与门店待支付总金额
				praNumber_all:0,//从业者入职总人数
				register_all:0,//注册总数
				praNumbered:0,//已入职百分比
				totalHireded:0,//待入职百分比
				registeredShoped:0,//线下门店百分比
				registeredEmployersed:0,//雇主百分比
				registeredPreed:0,//从业者百分比
				myChart1:null,
				myChart2:null,
				myChart3:null,
			}
		},

		methods: {
			leave(){
				console.log(111111111111111111111)
			},
		getData(){
			this.$houseAxios.get('/house/overview/selectEmployerNumber', {
				
			}).then(res=>{
				console.log(res)
				let data = res.data.data;
				this.numberEmployees = data.numberEmployees;
				this.numberJobsPosted = data.numberJobsPosted;
				this.recruitmentCompleted = data.recruitmentCompleted
				let number_all = this.numberJobsPosted + this.recruitmentCompleted;
				this.numberJobsPosteded =parseInt(this.numberJobsPosted/number_all*100);
				this.recruitmentCompleteded =parseInt(this.recruitmentCompleted/number_all*100);
				// console.log(number_all,'总数');
				// console.log(this.numberJobsPosted,'已发布的岗位总数');
				// console.log(this.recruitmentCompleted,'完成招聘总数');
				// console.log(this.numberJobsPosteded);
				// console.log(this.recruitmentCompleteded);
				this.registeredEmployers = data.registeredEmployers
				this.registeredPre = data.registeredPre
				this.registeredShop = data.registeredShop
				this.totalHired = data.totalHired
				this.empNumber = data.empNumber;
				this.amountOfBonusPoints = data.amountOfBonusPoints;
				this.paymentMoney = data.paymentMoney;
				this.paymentOrderNumber = data.paymentOrderNumber;
				this.praNumber = data.praNumber;
				this.prepaidOrderNumber = data.prepaidOrderNumber;
				this.shopNumber = data.shopNumber;
				this.unpaidMoney = data.unpaidMoney;
				this.praNumber_all = this.totalHired + this.numberEmployees;
				this.register_all = this.registeredEmployers + this.registeredPre + this.registeredShop;
				this.registeredShoped = parseInt(this.registeredShop/this.register_all*100);
				this.registeredEmployersed = parseInt(this.registeredEmployers/this.register_all*100);
				this.registeredPreed = parseInt(this.registeredPre/this.register_all*100);
				let Piechartdata = [{value:this.registeredEmployers,name:'雇主'},{value:this.registeredPre,name:'从业者'},{value:this.registeredShop,name:'线下门店'}]
				
				// console.log(this.register_all,'总数')
				// console.log(this.registeredShop,'线下门店数')
				// console.log(this.registeredShoped+'%')
				this.Piechart(Piechartdata);
				this.praNumbered = parseInt(this.numberEmployees/this.praNumber_all*100);
				this.totalHireded = parseInt(this.totalHired/this.praNumber_all*100);
				// console.log(this.numberEmployees,'已入职总数');
				// console.log(this.praNumber_all,'总数');
				// console.log(this.totalHired,'待入职总数')
				// console.log(this.praNumbered);
				// console.log(this.totalHireded);
				this.Histogram1();
			}).catch(err=>{})
			
		},
		Histogram1(){
		this.myChart1 = this.$echarts.init(document.getElementById("Histogram1"));	
		this.myChart1.setOption({
			title: {
				text: "从业者入职比例：",
				fontSize: 13,
			},
			grid: {
				width:600,
				top:'60',
				left: "3%",
				right: "20%",
				bottom: "3%",
				containLabel: true
			},
			xAxis: {
				type: 'value',
				show: false,
				// position:'top',
				// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'category',
			},
			
			series: [{
					name: "女",
					type: "bar",
					stack: 'amount',
					barWidth : 30,//柱图宽度
					// barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
					itemStyle: {
						normal: {
							shadowBlur: 10,
							shadowColor: '#FF7B7B',
							shadowOffsetY:6,
							barBorderRadius:[0, 10, 10, 0],
							label: {
								show: true,
								position: "right",
								formatter: " 已入职" + this.praNumbered + "%" + '(' + this.praNumbered + ')',
								fontSize: 16,
								color:'#000000'
							},
							color: new this.$echarts.graphic.LinearGradient(
								0,
								1,
								0,
								0,
								[{
										offset: 0,
										color: "#FF7B7B", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#FF0000", // 100% 处的颜色
									},
								],
								false
							),
							borderWidth:1,
							borderColor:"#FFFFFF",
						}
					},
					// data: this.womanData
					data:[{value:this.numberEmployees,name: '雇主'}],
					 // data:[{value:5,name: '雇主'}],
				},
				{
					name: "男",
					type: "bar",
					barWidth : 30,//柱图宽度
					barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
					itemStyle: {
						normal: {
							shadowBlur: 10,
							shadowColor: '#80AEFF',
							shadowOffsetY:6,
							barBorderRadius:[0, 10, 10, 0],
							label: {
								show: true,
								position: "right",
								formatter: " 待入职" + this.totalHireded + "%" + '(' + this.totalHireded + ')',
								fontSize: 16,
								color:'#000000'
							},
							color: new this.$echarts.graphic.LinearGradient(
								0,
								1,
								0,
								0,
								[{
										offset: 0,
										color: "#80AEFF", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#004DD5", // 100% 处的颜色
									},
								],
								false
							),
							borderWidth:1,
							borderColor:"#FFFFFF",
						}
					},
					// data: this.manData
					data:[{value: this.totalHired,name: '雇主'}],
					// data:[{value:1,name: '雇主'}],
				},
			]
			});
		},
		Histogram2(){
		this.myChart2 = this.$echarts.init(document.getElementById("Histogram2"));	
		this.myChart2.setOption({
			legend: {
			top:6,
			show:false
			},
			title: {
				text: "雇主/门店招聘成功比例：",
				fontSize: 13,
			},
			grid: {
				width:600,
				top:'60',
				left: "3%",
				right: "20%",
				bottom: "3%",
				containLabel: true
			},
			xAxis: {
				type: 'value',
				show: false,
				// position:'top',
				// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'category',
			},
			
			series: [{
					name: "女",
					type: "bar",
					barWidth : 30,//柱图宽度
					barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
					show:true,
					itemStyle: {
						normal: {
							shadowBlur: 10,
							shadowColor: '#FF7B7B',
							shadowOffsetY:6,
							barBorderRadius:[0, 10, 10, 0],
							label: {
								show: true,
								position: "right",
								formatter: " 完成招聘总数" + this.recruitmentCompleteded  + "%" + '(' + this.recruitmentCompleteded + ')',
								fontSize: 16,
								color:'#000000'
							},
							color: new this.$echarts.graphic.LinearGradient(
								0,
								1,
								0,
								0,
								[{
										offset: 0,
										color: "#FF7B7B", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#FF0000", // 100% 处的颜色
									},
								],
								false
							),
							borderWidth:1,
							borderColor:"#FFFFFF",
						}
					},
					// data: this.womanData
					data: [{value: this.recruitmentCompleted,name: '雇主'}],
					// data: [{value: 6,name: '雇主'}],
				},
				{
					name: "男",
					type: "bar",
					barWidth : 30,//柱图宽度
					show:true,
					itemStyle: {
						normal: {
							barBorderRadius:[0, 10, 10, 0],
							shadowColor: '#80AEFF',
							shadowBlur: 10,
							shadowOffsetY:6,
							label: {
								show: true,
								position: "right",
								formatter: " 已发布岗位总数" + this.numberJobsPosteded  + "%" + '(' + this.numberJobsPosteded + ')',
								fontSize: 16,
								color:'#000000'
							},
							color: new this.$echarts.graphic.LinearGradient(
								0,
								1,
								0,
								0,
								[{
										offset: 0,
										color: "#80AEFF", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#004DD5", // 100% 处的颜色
									},
								],
								false
							),
							borderWidth:1,
							borderColor:"#FFFFFF",
						}
					},
					// data: this.manData
					data: [{value: this.numberJobsPosted,name: '雇主'}],
					// data: [{value:5,name: '雇主'}],
				}
			]
			});
		},
		formatter(item){
			console.log(item.data.name,'item.name');
			if(item.data.name=='线下门店'){
			  return '{total|线下门店'+item.value+'人}'+ '\n\r' + '{active|' + this.registeredShoped +'%}';
			}else if(item.data.name=='雇主'){
				return '{total|雇主'+item.value+'人}'+ '\n\r' + '{active|' + this.registeredEmployersed +'%}';
			}else if(item.data.name=='从业者'){
				return '{total|从业者'+item.value+'人}'+ '\n\r' + '{active|' + this.registeredPreed +'%}';
			}
			
			// if(item.data.name=='线上门店'){
			// 	return 'xianshangmendian'
			// }else if(item.data.name=='雇主'){
			// 	return 'guzhu'
			// }else{
			// 	return 'congyezhe'
			// }
		},
		Piechart(data){
			this.myChart3 = this.$echarts.init(document.getElementById("Piechart"));
			this.myChart3.setOption({
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: 'bottom',
					left: 'center'
				},
				series: [{
					name: '',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						normal:{
							show:false,
							position: 'center',
							formatter:this.formatter,
							textStyle:{
								fontSize: '38',
								fontWeight: 'bold',
								lineHeight:'40'
							}
						}
					},
					emphasis: {
						label: {
							show: true,
							default:1,
							formatter:this.formatter,
							rich:{
								total:{
									color:'#333333',
									fontSize:13
								},
								active:{
									fontSize: '38',
									fontWeight: 'bold',
									color:'#0062FF',
								}
							}
						}
					},
					labelLine: {
						show: false,
						
					},
					color: ['red', 'blue', '#FFB100'],
					data,
					
				}]
			})
		},
		resize() {
		 this.myChart1.resize();
		 this.myChart2.resize();
		 this.myChart3.resize();
		},
		},
		beforeDestroy() {
			window.removeEventListener("resize", this.resize);
		},
		mounted() {
			this.getData();
			this.Histogram2();
			// this.Linechart();
			window.addEventListener("resize", this.resize);
		},

	}
</script>
<style scoped="scoped">
	.container {
		display: flex;
		flex-direction: column;
		width: 95%;
		margin: 1% auto;
		margin-bottom: 0;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	.container>div{
		flex: 1;
	}
	.title {
		width: 100%;
		/* border: 1px solid blue; */
		display: flex;
		justify-content: space-between;
		padding: 0;
		margin-bottom: 1%;
	}

	.title_le {
		width: 25%;
		background-color: #E2F2FF;
		border-radius: 5px;
		text-align: center;
		line-height: 63px;
	}

	.center {
		width: 100%;
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-between;
		margin-bottom: 1%;
	}

	.money {
		display: flex;
		flex-direction: column;
		flex: 1;
		background: #f8f8f8;
		border-radius: 5px;
		text-align: center;
		margin-right: 1%;
	}
	.money:nth-child(5){
		margin: 0;
	}
	.money-child {
		    font-size: 17px;
		    font-family: PingFang SC;
		    font-weight: bold;
		    line-height: 21px;
		    color: #000000;
		    margin: 22px 0 16px 0px;
	}

	.money-childs {
		flex: 1;
		height: 66px;
		font-size: 47px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 66px;
		color: #004DD5;
		margin: 0 auto;
	}

	.Chart {
		display: inline-block;
		 background: #f8f8f8;
	}
	.Fan{
		/* float: right; */
		position: relative;
	}
	.bottom {
		position: relative;
		width: 100%;
		height: 175px;
		background: #f8f8f8;
		border-radius: 5px;
		display: flex;
		justify-content: space-around;
		margin-top:1%;
	}

	.bottom>.btn {
		position: absolute;
		left: 0;

	}

	.bottom>.btn>button {
		background: #FFFFFF;
		border: 1px solid #004DD5;
		width: 52px;
		height: 39px;

		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 21px;

	}

	.bottom>.btn>button:hover {
		width: 52px;
		height: 39px;
		background: #004DD5;
		border: 1px solid #FFFFFF;
		color: #FFFFFF;
		border-radius: 5px 5px 0px 0px;
	}

	.bottom-child {
		color: #797979;
	}
	.bottom_box{
		display: flex;
		width: 80%;
		justify-content: space-between;
	}
	.bottom_box>.money{
		margin-left: 150px;
	}
	.chart_title{
		margin: 21px 0 0 10px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.yuanhuan{
		        position: absolute;
		        top: 54%;
		        left: 50%;
		        transform: translate(-50%,-50%);
		        width: 40%;
		        height: 190px;
		        border: 2px solid #0062FF;
		        border-radius: 50%;
	}
	.percentage{
		position: absolute;
	    z-index: 9999;
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	.percentage>.percentage_item2{
		font-size: 41px;
		color: #0062FF;
		font-weight: bold;
		line-height: 60px;
	}
	.percentage>.percentage_item1{
		font-size: 13px;
		color: #333333;
	}
</style>
